<!DOCTYPE html>
<html th:lang="${language}" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header(#{okr.my})" />
  <th:block th:include="include :: okr-css" />

    <style>
        .ibox {
            font-weight: bold;
            background: rgba(145, 207, 227, 0.93);
        }

        .ibox-content{
            background: #c9dec6;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
  <div class="row" >
    <div class="col-sm-12 select-table table-striped">
      <div class="col-sm-8" id="starOkrList">
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
  var prefix = ctx + "star";
  $.ajax({
    url: prefix + "/getStarOkrList",
    type: 'POST',
    success: function (data){
      for (let i = 0; i < data.length; i++) {
        $("#starOkrList").append("<div class=\"ibox\" onclick='queryOkr(" + data[i].id + ")'>" +
                // +"<div class=\"ibox-title\">\n" +
                // "              <span class=\"label label-primary pull-right\">Objective</span>\n" +
                // "              <h5>IT-01 - 设计部</h5>\n" +
                // "            </div>\n" +
                "            <div class=\"ibox-content\">\n" +
                "              <h2>Objective:</h2>\n" +
                "              <p>\n" +
                "                "+"<h3>" + data[i].content+ "</h3>" +
                "              </p>\n" +
                "              <div>\n" +
                "                <span>当前目标进度：</span>\n" +
                "                <div class=\"stat-percent\"> " +"<h3>"+ data[i].process + "%</h3>" + "</div></div>\n" +
                "                <div class=\"progress progress-mini\">\n" +
                "                  <div style=\"width: "+ data[i].process +"%;\" class=\"progress-bar\"></div>\n" +
                "                </div>\n" +
                "              </div>\n" +
                "              <div class=\"row  m-t-sm\">\n" +
                "                <div class=\"col-sm-4\">\n" +
                "                  <div class=\"font-bold\">信心指数</div>\n" +
                "                  " + data[i].confidenceStar +
                "                </div>\n" +
                "                <div class=\"col-sm-4\">\n" +
                "                  <div class=\"font-bold\">评分</div>\n" +
                "                  " + data[i].scoreStar +
                "                </div>\n" +
                "                <div class=\"col-sm-4 text-right\">\n" +
                "                  <div class=\"font-bold\">权重</div>\n" +
                "                  "+"100% <i class=\"fa fa-level-up text-navy\"></i>\n" +
                "                </div>\n" +
                "              </div>      </div>")
      }

    }
  })




  // $(function(){
  //   var options = {
  //     url: prefix + "/okrList",
  //     showColumns: false,
  //     showRefresh: false,
  //     onDblClickRow: onDbClick,
  //     showToggle: false,
  //     showSearch: false,
  //     columns: [
  //       {
  //         field: 'id',
  //         visible: false
  //       },
  //       {
  //         field: 'userId',
  //         visible: false
  //       },
  //       {
  //         field: 'content',
  //         title: '内容描述',
  //         formatter: function (value, row, index) {
  //           return '<H4>' + value + '</H4>';
  //         }
  //       },
  //       {
  //         field: 'confidenceStar',
  //         title: [[#{okr.confidenceStar}]],
  //         formatter: function (value, row, index) {
  //           return '<span class="badge badge-success">' + value + '</span>';
  //         }
  //       },
  //       {
  //         field: 'scoreStar',
  //         title: [[#{okr.scoreStar}]],
  //         formatter: function (value, row, index) {
  //           return '<span class="badge badge-success">' + value + '</span>';
  //         }
  //       },
  //       {
  //         field: 'process',
  //         title: [[#{okr.progress}]],
  //         formatter: function (value, row, index) {
  //           return '<span class="badge badge-success">' + value  + '%</span>';
  //         }
  //       },
  //       {
  //         field: 'priority',
  //         title: [[#{okr.priority}]],
  //         formatter: function (value, row, index) {
  //           return '<span class="badge badge-success">' + value  + '</span>';
  //         }
  //       },
  //       {
  //         field: 'operation',
  //         title: [[#{okr.operation}]],
  //         classes: 'col-xs-12',
  //         formatter: function (value, row, index){
  //           let actions = [];
  //           actions.push("<a class='btn btn-primary btn-xs' href='javascript:void(0)' onclick='queryOkr( " + row.id + " )'><i class='fa fa-edit'></i>查询OKR</a>")
  //           return actions.join('')
  //         }
  //       }
  //     ]
  //   }
  //   $.table.init(options)
  // })


  function queryOkr(id){
    $.modal.openTab("查询关注的Okr", ctx + "okr/info/view/" + id)
  }


</script>
</body>
</html>